<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="echarts-all-3.js"></script>
       <script type="text/javascript" src="extension/dataTool.min.js"></script>
       <script type="text/javascript" src="china.js"></script>
       <script type="text/javascript" src="world.js"></script>
       <script type="text/javascript" src="api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var geoCoordMap = {
	'Indonesia': [122.0361,-3.8204],
    'Shanghai': [121.4648,31.2891],
    'Urumchi': [87.9236,43.5883],
    'Beijing': [116.4551,40.2539],
    'NanJing': [118.8062,31.9208],
    'Hefei': [117.29,32.0581],
    'Lhasa': [91.1865,30.1465],
    'Hohhot': [111.4124,40.4901],
    'Harbin': [127.9688,45.368],
    'Tianjin': [117.4219,39.4189],
    'Guangzhou': [113.5107,23.2196],
    'Chengdu': [103.9526,30.7617],
    'Yangzhou': [119.4653,32.8162],
    'Kunming': [102.9199,25.4663],
    'Hangzhou': [119.5313,29.8773],
    'Wuhan': [114.3896,30.6628],
    'Shenyang': [123.1238,42.1216],
    'Jinan': [117.1582,36.8701],
    'Shenzhen': [114.5435,22.5439],
    'Shijiazhuang': [114.4995,38.1006],
    'Fuzhou': [119.4543,25.9222],
    'Zhengzhou': [113.4668,34.6234],
    'Chongqing': [107.7539,30.1904],
    'Changsha': [113.0823,28.2568],
    'New Delhi':[77.2228,24.5271],
    'Manila':[14.5347,121.0880],
    'Tokyo':[136.9171,34.8543],
    'Astana':[71.4703,51.16052],
    'Moscow':[37.6173,55.7558],
    'Seoul':[127.0074,36.6463],
    'Sydney':[151.2092,-33.8688],
    'New York':[-74.0059,40.7127],
    'Greece':[21.8243,39.0742],
    'Paris':[2.3522,48.8566],
    'Congo':[15.8276,-0.2280],
    'Rio':[-43.1728,-22.9068],
    'Vancouver':[-123.1207,49.2827]
};
var ExitData = [
    [{name:'Indonesia'}, {name:'Beijing',value:100}],
    [{name:'Indonesia'}, {name:'Lhasa',value:70}],
    [{name:'Indonesia'}, {name:'Shanghai',value:70}],
    [{name:'Indonesia'}, {name:'Guangzhou',value:70}],
    [{name:'Indonesia'}, {name:'Harbin',value:70}],
    [{name:'Indonesia'}, {name:'Kunming',value:70}],
    [{name:'Indonesia'}, {name:'Urumchi',value:70}],
    [{name:'Indonesia'}, {name:'New Delhi',value:70}],
    [{name:'Indonesia'}, {name:'Tokyo',value:100}],
    [{name:'Indonesia'}, {name:'Moscow',value:100}],
    [{name:'Indonesia'}, {name:'Paris',value:100}],
    [{name:'Indonesia'}, {name:'Greece',value:70}],
    [{name:'Indonesia'}, {name:'New York',value:70}],
    [{name:'Indonesia'}, {name:'Sydney',value:70}],
    [{name:'Indonesia'}, {name:'Congo',value:100}],
    [{name:'Indonesia'}, {name:'Rio',value:100}],
    [{name:'Indonesia'}, {name:'Astana',value:100}],
    [{name:'Indonesia'}, {name:'Vancouver',value:100}]
];
var EntryData = [
    [{name:'Beijing',value:100}, {name:'Indonesia'}],
    [{name:'Lhasa',value:70}, {name:'Indonesia'}],
    [{name:'Shanghai',value:70}, {name:'Indonesia'}],
    [{name:'Guangzhou',value:70}, {name:'Indonesia'}],
    [{name:'Harbin',value:70}, {name:'Indonesia'}],
    [{name:'Kunming',value:70}, {name:'Indonesia'}],
    [{name:'Urumchi',value:70}, {name:'Indonesia'}],
    [{name:'New Delhi',value:100}, {name:'Indonesia'}],
    [{name:'Tokyo',value:100}, {name:'Indonesia'}],
    [{name:'Moscow',value:100}, {name:'Indonesia'}],
    [{name:'Paris',value:100}, {name:'Indonesia'}],
    [{name:'Greece',value:70}, {name:'Indonesia'}],
    [{name:'New York',value:100}, {name:'Indonesia'}],
    [{name:'Sydney',value:70}, {name:'Indonesia'}],
    [{name:'Congo',value:100}, {name:'Indonesia'}],
    [{name:'Rio',value:100}, {name:'Indonesia'}],
    [{name:'Seoul',value:100}, {name:'Indonesia'}],
    [{name:'Vancouver',value:100}, {name:'Indonesia'}]
];

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

var convertData = function (data) {
	//[{name:'印尼'}, {name:'北京',value:100}]
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                toValue: geoCoordMap[dataItem[0].name],
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

var color = ['#a6c84c', '#ffa022'];
var series = [];
[['Exit', ExitData],['Entry', EntryData]].forEach(function (item, i) {
    series.push({
        name: item[0],
        type: 'lines',
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 0,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0],
        type: 'lines',
        zlevel: 2,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.4,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        //name: item[0],
        name: item[1],
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
            brushType: 'stroke'
        },
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
            }
        },
        symbolSize: function (val) {
            return val[2] / 8;
        },
        itemStyle: {
            normal: {
                color: color[i]
            }
        },
        data: item[1].map(function (dataItem) {
            return {
                name: dataItem[1].name,
				value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
        })
    });
});

option = {
    backgroundColor: '#404a59',
    title : {
        text: 'Indonesia simulation migration',
        subtext: 'Data is purely fictional',
        left: 'center',
        textStyle : {
            color: '#fff'
        }
    },
    tooltip : {
        // trigger: 'item',
        formatter: function (v) {
			if(v.data.toValue !== geoCoordMap[v.data.toName])
                return v.data.fromName+'-->'+v.data.toName;
            else{
                for(var i = 0;i <color.length;i++){
                // alert(v.data.value);
                    return '<font color=red>'+'●'+'</font> ' + v.data.name + '：' + v.data.value; 
                }
            }
        }
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data:['Entry','Exit'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: series
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>